<template>
  <div v-loading="loading" class="subject">
    <div v-for="(item,index) in renderSubjectList " :key="index" :class="['subjectItem',!item.optionsNum1||item.optionsNum2>item.optionsNum1?'redItem':'']"
         @click="goInfo(item)"
    >
      <p>{{ item.qtitle }}</p>
      <div class="progress">
        <div class="progressText">
          <span style="color:#409EFF">{{ item.optionOne }} {{ item.optionsNum1 }}</span>
          <span style="color:#F56C6C">{{ item.optionTwo }} {{ item.optionsNum2 }}</span>
        </div>
        <el-progress
          :percentage="item.percent"
          :format="format"
          :text-inside="true"
          :stroke-width="10"
        />
      </div>
      <span class="des">
        “ {{ showEllipsis(item.qdesc,40) }} ”
      </span>
      <div class="barBottom">
        <slot name="typeTag">
          <div><svg-icon icon-class="fire" /> {{ item.discussNum }}</div>
        </slot>
        <span>{{ transformTimestamp(item.addDate) }}</span>
      </div>
    </div>
    <div class="bottom">
      杠到底了
    </div>
  </div>
</template>
<script>
import { showEllipsis, transformTimestamp } from '../utils/validate';
import { getOptionsByQid } from '../api/subject';
export default {
  name: 'BarSubjectItem',
  props: {
    subjectBySearch: {
      type: [Object, Array],
      default: () => {}
    },
    pageFlag: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      renderSubjectList: [],
      loading: false
    };
  },
  watch: {
    subjectBySearch: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.loading = true;
          this.getOptionsBySubject(newValue);
        }
      }
      // immediate: true
    }
  },
  methods: {
    showEllipsis,
    transformTimestamp,
    // 得到题目的选择表
    getOptionsBySubject(newValue) {
      getOptionsByQid().then((res) => {
        if (res.data.code === 200) {
          const resultMap = res.data.data.reduce((pre, next) => {
            if (next.qid in pre) {
              pre[next.qid] = pre[next.qid].concat([next]);
            } else {
              pre[next.qid] = [next];
            }
            return pre;
          }, {});
          for (const key in resultMap) {
            let optionsNum1 = 0;
            let optionsNum2 = 0;
            if (Object.hasOwnProperty.call(resultMap, key)) {
              resultMap[key].forEach(item => {
                if (item.useroption === 1) {
                  optionsNum1++;
                } else {
                  optionsNum2++;
                }
              });
              resultMap[key] = {
                'optionsNum1': optionsNum1,
                'optionsNum2': optionsNum2,
                'percent': parseInt(optionsNum1 / (optionsNum1 + optionsNum2) * 100)
              };
            }
          }
          newValue.forEach(item => {
            if (item.qid in resultMap) {
              this.$set(item, 'optionsNum1', resultMap[item.qid].optionsNum1);
              this.$set(item, 'optionsNum2', resultMap[item.qid].optionsNum2);
              this.$set(item, 'percent', resultMap[item.qid].percent);
            }
          });
          this.renderSubjectList = newValue;
          this.loading = false;
        }
      });
    },
    goInfo(item) {
      this.$router.push({ name: 'subjectinfo', params: { subjectItem: item, flag: this.pageFlag } });
    },
    format() {
      return '';
    }
  }
};
</script>
<style lang="scss" scoped>
.subject{
  width: 100%;
  height: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  .subjectItem{
    width: 100%;
    height: 160px;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 15px;
    background: #d0e7fd;
    p{
      font-size: 16px;
      font-weight: bold;
      line-height: 32px;
    }
    .progress{
      width: 100%;
      margin-right: 10px;
      .progressText{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
      }
    }
    .des{
      font-size: 14px;
      color: #5e5e5e;
    }
    .barBottom{
      margin-top: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #5e5e5e;
    }
  }
  .redItem{
    background: #fad8d8
  }
  .bottom{
    text-align: center;
    color: #5e5e5e;
    font-size: 12px;
  }
}
</style>
